<template>
    <div class="pay-container">
      <!-- 页面标题 -->
      <div class="page-header">
        <h1>确认支付</h1>
      </div>
  
      <!-- 订单信息卡片 -->
      <el-card class="order-card">
        <div class="order-header">
          <h2>订单信息</h2>
          <span class="order-status">待支付</span>
        </div>
        
        <div class="order-detail">
          <div class="order-item">
            <span class="label">订单编号</span>
            <span class="value">{{ orderNo }}</span>
          </div>
          <div class="order-item">
            <span class="label">创建时间</span>
            <span class="value">{{ createTime }}</span>
          </div>
          <div class="order-item">
            <span class="label">商品信息</span>
            <span class="value">{{ productName }}</span>
          </div>
          <div class="order-item total-amount">
            <span class="label">支付金额</span>
            <span class="value">¥{{ totalAmount }}</span>
          </div>
        </div>
      </el-card>
  
      <!-- 支付方式选择 -->
      <el-card class="pay-method-card">
        <h2 class="pay-method-title">选择支付方式</h2>
        
        <div class="pay-methods">
          <!-- 微信支付 -->
          <div 
            class="pay-method" 
            :class="{ active: selectedMethod === 'wechat' }"
            @click="selectedMethod = 'wechat'"
          >
            <div class="method-info">
              <h3>微信支付</h3>
              <p>推荐微信用户使用</p>
            </div>
            <el-radio v-model="selectedMethod" label="wechat" border />
          </div>
          
          <!-- 支付宝支付 -->
          <div 
            class="pay-method" 
            :class="{ active: selectedMethod === 'alipay' }"
            @click="selectedMethod = 'alipay'"
          >
            <div class="method-info">
              <h3>支付宝支付</h3>
              <p>推荐支付宝用户使用</p>
            </div>
            <el-radio v-model="selectedMethod" label="alipay" border />
          </div>
        </div>
      </el-card>
  
      <!-- 支付二维码区域 (默认隐藏) -->
      <el-card 
        class="qr-code-card" 
        v-if="showQrCode"
        :class="selectedMethod === 'wechat' ? 'wechat-qr' : 'alipay-qr'"
      >
        <div class="qr-header">
          <h2>{{ selectedMethod === 'wechat' ? '微信支付' : '支付宝支付' }}</h2>
          <span class="countdown" v-if="countdown > 0">
            请在 {{ countdown }} 秒内完成支付
          </span>
          <span class="expired" v-else>
            二维码已过期 <el-button type="text" @click="refreshQrCode">点击刷新</el-button>
          </span>
        </div>
        
        <div class="qr-content">
          <div class="qr-code" v-if="!paymentSuccess">
            <img 
              :src="qrCodeUrl" 
              alt="支付二维码" 
              class="qr-image"
            >
            <p>请使用{{ selectedMethod === 'wechat' ? '微信' : '支付宝' }}扫描二维码支付</p>
          </div>
          
          <div class="payment-success" v-if="paymentSuccess">
            <h3>支付成功</h3>
            <p>感谢您的购买</p>
            <el-button type="primary" @click="gotoOrderDetail">查看订单详情</el-button>
          </div>
        </div>
        
        <div class="qr-footer">
          <el-button type="text" @click="cancelPayment">取消支付</el-button>
        </div>
      </el-card>
  
      <!-- 底部操作按钮 -->
      <div class="pay-actions" v-if="!showQrCode">
        <el-button 
          type="primary" 
          class="pay-button"
          @click="confirmPayment"
        >
          确认支付 ¥{{ totalAmount }}
        </el-button>
      </div>
    </div>
  </template>
  
  <script setup lang="ts">
  import { ref, onMounted, onUnmounted } from 'vue';
  import { ElMessage } from 'element-plus';
  import { useRouter } from 'vue-router';
  import http from '../../util/request';
  const id: any = ref(useRouter().currentRoute.value.params.id);
  const type: any = ref(useRouter().currentRoute.value.params.type);
  
  // 订单信息
  const orderNo = 'ORD' + Math.floor(Math.random() * 100000000);
  const createTime = new Date().toLocaleString();
  const productName = ref('');
  const totalAmount = ref(0);
  
  // 支付方式
  const selectedMethod = ref('wechat');
  const showQrCode = ref(false);
  const qrCodeUrl = ref('');
  const countdown = ref(60);
  const paymentSuccess = ref(false);
  let countdownTimer:any = null;
  
  // 生成支付二维码
  const generateQrCode = () => {
    // 实际项目中应该调用后端接口获取真实的支付二维码
    // 这里使用随机图片作为示例
    const randomId = Math.floor(Math.random() * 1000);
    qrCodeUrl.value = `https://picsum.photos/300/300?random=${randomId}`;
  };
  
  // 确认支付
  const confirmPayment = () => {
    showQrCode.value = true;
    generateQrCode();
    startCountdown();
    //生成订单
    onOrder();
    if(productName.value == '11111'){
      startPaymentPolling();
    }
    
    // 模拟支付状态轮询
    
  };
  
  // 开始倒计时
  const startCountdown = () => {
    countdown.value = 60;
    if (countdownTimer) clearInterval(countdownTimer);
    
    countdownTimer = setInterval(() => {
      countdown.value--;
      if (countdown.value <= 0) {
        clearInterval(countdownTimer);
      }
    }, 1000);
  };
  
  // 刷新二维码
  const refreshQrCode = () => {
    generateQrCode();
    startCountdown();
  };
  
  // 取消支付
  const cancelPayment = () => {
    showQrCode.value = false;
    clearInterval(countdownTimer);
    paymentSuccess.value = false;
  };

  const onOrder = () => {
    http.put('/user/order',{no:orderNo,title:productName.value,type:type.value,product_id:id.value}).then((response:any)=>{
      if(response.data.code == '200'){
        ElMessage.info('支付成功');
        // router.go(-1);
        return
      }
      ElMessage.error(response.data.msg);
    })
  };
  
  const onCourse = () => {
    http.get('/course/info/'+id.value).then((response:any)=>{
      productName.value = response.data.data.title
      totalAmount.value = response.data.data.price
    })
  };

  const onProduct = () => {
    http.get('/product/info/'+id.value).then((response:any)=>{
      productName.value = response.data.data.title
      totalAmount.value = response.data.data.price
    })
  };

  const onInformation = () => {
    http.get('/information/info/'+id.value).then((response:any)=>{
      productName.value = response.data.data.title
      totalAmount.value = response.data.data.price
    })
  };

  onMounted(()=>{
    if(type.value == 'course'){
      onCourse()
      return;
    }
    if(type.value == 'information'){
      onInformation()
      return;
    }
    if(type.value == 'product'){
      onProduct()
      return;
    }
      // onOrder()
  })
  
  // 查看订单详情
  const gotoOrderDetail = () => {
    ElMessage.info('跳转到订单详情');
  };
  
  // 模拟支付状态轮询
  const startPaymentPolling = () => {
    // 实际项目中应该定期调用后端接口查询支付状态
    const pollTimer = setInterval(() => {
      // 随机模拟支付成功（实际项目中根据后端返回结果判断）
      const randomSuccess = Math.random() > 0.85;
      
      if (randomSuccess && !paymentSuccess.value) {
        clearInterval(pollTimer);
        clearInterval(countdownTimer);
        paymentSuccess.value = true;
        ElMessage.success('支付成功');
      }
      
      // 如果二维码过期，停止轮询
      if (countdown.value <= 0 && !paymentSuccess.value) {
        clearInterval(pollTimer);
      }
    }, 3000);
  };
  
  // 清理定时器
  onUnmounted(() => {
    if (countdownTimer) clearInterval(countdownTimer);
  });
  </script>
  
  <style scoped>
  .pay-container {
    max-width: 500px;
    margin: 0 auto;
    padding: 20px 15px;
    box-sizing: border-box;
  }
  
  .page-header {
    display: flex;
    align-items: center;
    margin-bottom: 25px;
  }
  
  .back-icon {
    font-size: 20px;
    margin-right: 15px;
    cursor: pointer;
    color: #666;
  }
  
  .page-header h1 {
    font-size: 20px;
    font-weight: 600;
    margin: 0;
  }
  
  .order-card, .pay-method-card {
    margin-bottom: 15px;
    border-radius: 12px;
    border: none;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05);
    overflow: hidden;
  }
  
  .order-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 15px;
    padding-bottom: 10px;
    border-bottom: 1px solid #f5f5f5;
  }
  
  .order-header h2 {
    font-size: 16px;
    margin: 0;
  }
  
  .order-status {
    color: #ff4d4f;
    font-size: 14px;
    background-color: rgba(255, 77, 79, 0.1);
    padding: 2px 8px;
    border-radius: 12px;
  }
  
  .order-detail {
    padding: 5px 0;
  }
  
  .order-item {
    display: flex;
    justify-content: space-between;
    padding: 8px 0;
    font-size: 14px;
  }
  
  .order-item .label {
    color: #666;
  }
  
  .order-item .value {
    color: #333;
    text-align: right;
  }
  
  .total-amount {
    margin-top: 10px;
    padding-top: 10px;
    border-top: 1px dashed #f0f0f0;
  }
  
  .total-amount .value {
    color: #ff4d4f;
    font-size: 18px;
    font-weight: 600;
  }
  
  .pay-method-title {
    font-size: 16px;
    margin: 0 0 15px 0;
    padding-bottom: 10px;
    border-bottom: 1px solid #f5f5f5;
  }
  
  .pay-methods {
    display: flex;
    flex-direction: column;
    gap: 10px;
  }
  
  .pay-method {
    display: flex;
    align-items: center;
    padding: 12px 15px;
    border-radius: 8px;
    border: 1px solid #e5e5e5;
    cursor: pointer;
    transition: all 0.2s ease;
  }
  
  .pay-method.active {
    border-color: #409eff;
    background-color: rgba(64, 158, 255, 0.05);
  }
  
  .method-icon {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-right: 15px;
    font-size: 20px;
  }
  
  .wechat-icon {
    background-color: #07c160;
    color: white;
  }
  
  .alipay-icon {
    background-color: #1677ff;
    color: white;
  }
  
  .method-info {
    flex: 1;
  }
  
  .method-info h3 {
    margin: 0 0 3px 0;
    font-size: 16px;
  }
  
  .method-info p {
    margin: 0;
    font-size: 12px;
    color: #999;
  }
  
  .pay-method .el-radio {
    margin-left: auto;
  }
  
  .qr-code-card {
    margin-bottom: 20px;
    border-radius: 12px;
    overflow: hidden;
  }
  
  .wechat-qr {
    border: 1px solid #07c160;
  }
  
  .alipay-qr {
    border: 1px solid #1677ff;
  }
  
  .qr-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 15px;
    background-color: rgba(7, 193, 96, 0.1);
    color: #07c160;
  }
  
  .alipay-qr .qr-header {
    background-color: rgba(22, 119, 255, 0.1);
    color: #1677ff;
  }
  
  .qr-header h2 {
    margin: 0;
    font-size: 16px;
  }
  
  .countdown {
    font-size: 14px;
  }
  
  .expired {
    font-size: 14px;
    color: #ff4d4f;
  }
  
  .qr-content {
    padding: 30px 20px;
    text-align: center;
  }
  
  .qr-code {
    display: inline-block;
  }
  
  .qr-image {
    width: 200px;
    height: 200px;
    padding: 10px;
    background-color: white;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
    margin-bottom: 15px;
  }
  
  .qr-code p {
    margin: 0;
    color: #666;
    font-size: 14px;
  }
  
  .payment-success {
    padding: 20px 0;
  }
  
  .success-icon {
    font-size: 60px;
    color: #52c41a;
    margin-bottom: 15px;
  }
  
  .payment-success h3 {
    margin: 0 0 10px 0;
    font-size: 20px;
    color: #333;
  }
  
  .payment-success p {
    margin: 0 0 20px 0;
    color: #666;
  }
  
  .qr-footer {
    padding: 10px 15px;
    text-align: center;
    border-top: 1px solid #f5f5f5;
  }
  
  .pay-actions {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    max-width: 500px;
    margin: 0 auto;
    padding: 15px;
    background-color: white;
    box-shadow: 0 -2px 10px rgba(0, 0, 0, 0.05);
    box-sizing: border-box;
  }
  
  .pay-button {
    width: 100%;
    height: 48px;
    font-size: 16px;
    border-radius: 24px;
  }
  
  /* 响应式调整 */
  @media (max-width: 375px) {
    .qr-image {
      width: 180px;
      height: 180px;
    }
    
    .order-item {
      font-size: 13px;
    }
  }
  </style>
      